{extend name="public/base" /}
{block name="pjax_container"}
<?php
    $titleTypeName = '编辑';
?>
<style>

     
 
.content-header>.breadcrumb>li{
    color: #999;
}
.content-header>.breadcrumb>.active{
    color: #666;
}
.content-header{
    height: 51px;
 
}
.btn-primary{
      background-color: #1890FF;
    color: #fff;
    border: none;
    border-radius: 6px !important;
    margin-left: 15px;
    padding: 5px 10px; 
}
.box-primary{
  border-top-color: #ecf0f5 !important;
  border-top-width: 16px;
  
}
.btn-primary:hover{
     background-color: #1890FF;
    color: #fff;
    border: none;
    opacity: .9;
    border-radius: 6px !important; 
}
.delete-one{
    background-color: ff4141 !important;
    margin-left: 15px;
    border-radius: 6px;
}
.sreachs{
       background-color: #1890FF;
    color: #fff;
    border: none;
    border-radius: 6px !important;
    margin-left: 15px;
    padding: 7px 15px; 
}
.nav-tabs-custom {
    margin-top: 16px;
}
.form-control{
width: 90%;
border-radius: 8px;
}
.nav-tabs-custom{
        margin-top: 16px;
    }
    .modal-content{
    margin-top: 150px;
   width: 600px;
    height: 700px;

}
.modal-body{
    padding: 27px;
       width: 540px;
    height: 570px;
    display: flex;
}
.modal-right{
    flex: 1;
    height: 104%;
    border: 1px solid #eee;
    margin-left: 30px;
}
.modal-left{
    width: 100%;
    height: 100%;
   
}
.modal-right>h4{
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.form-control{
    border-radius: 6px;
}
.modal-body{
    padding: 27px;
    width: 540px;
    height: 570px;
    display: flex;
}
.modal-right{
    flex: 1;
    height: 104%;
    border: 1px solid #eee;
    margin-left: 30px;
}
.modal-left{
    width: 100%;
    height: 100%;
   
}
.modal-right>h4{
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.form-control{
    border-radius: 6px;
}
.table-body{
    width: 540px;
    height: 470px;
    margin-top: 10px;
    border-radius: 6px;
    background-color: #eee;
}
.table-left{
    margin-right: 2%;
    width: 49%;
         height: 100%;
       float: left;
         border: 1px solid #eee;
    background-color: #fff;
}
.table-right{
       width: 49%;
         height: 100%;
           border: 1px solid #eee;
          float: left;
       background-color: #fff;
}
.layui-tree-entry{
    height: 100%;
    width: 100%;
    padding-right: 10px;
    line-height: 24px;
   
}
.table-right>p{
     text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
}
.table-right>h4{
      text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
   
}
.table-right>p>span{
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    width: 80%;
    display: inline-block;
    letter-spacing: 1px;
   
}

#myModal  .table-left{
    width: 100%;
}

.magic-radio,
.magic-checkbox {
	position: absolute;
	display: none;
    
}
 

 
.magic-radio + label,
.magic-checkbox + label {
	position: relative;
	display: block;
	padding-left: 30px;
	cursor: pointer;
 
}
 
.magic-radio + label:before,
.magic-checkbox + label:before {
	position: absolute;
	top: 0px;
	left: 0;
	display: inline-block;
	width: 20px;
	height: 20px;
        margin-top: 5px;
	content: '';
	border: 1px solid #c0c0c0;
}
.magic-checkbox + label:before{
    	top: -5px;
}
.magic-radio + label:after,
  .magic-checkbox + label:after {
	position: absolute;
	display: none;
	content: '';
        margin-top: 5px;
}
.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after {
	display: block;
}
.magic-radio + label:before {
	border-radius: 50%;
}
.magic-radio + label:after {
	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3e97eb;
}
.magic-radio:checked + label:before {
	border: 1px solid #3e97eb;
}
.magic-radio:checked[disabled] + label:before {
	border: 1px solid #c9e2f9;
}

.magic-checkbox + label:before {
	border-radius: 3px;
}
.magic-checkbox + label:after {
	top: 2px;
	left: 7px;
	box-sizing: border-box;
	width: 6px;
	height: 12px;
	transform: rotate(45deg);
	border-width: 2px;
	border-style: solid;
	border-color: #fff;
	border-top: 0;
	border-left: 0;
}
.magic-checkbox + label:after {
    top: -2px;
}
.magic-checkbox:checked + label:before {
    border: #1890FF;
    background: #1890FF;
}
.magic-checkbox:checked[disabled] + label:before {
	border: #1890FF;
	background: #1890FF;
}
</style>
<section class="content-header">
    <ol class="breadcrumb">
        <li>组织机构</li>
        <li>部门列表</li>
        <li class="active"> {$titleTypeName}</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal" method="POST" action="/{$Think.MODULE_NAME}/{$Think.CONTROLLER_NAME}/{$Think.ACTION_NAME}" onsubmit="return false" >
                <input type="hidden" name="id" value="{$info.id|default=0}" />
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="pull-right"><a href="javascript:history.back(-1)" class="btn btn-sm" style="padding:10px 2px;"><i class="fa fa-list"></i> 返回</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">

                            <div class="form-group">
                                <label class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-3">
                                    <input class="form-control" name="name" value="{$info['name']|default=''}" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-3" style="display: flex;">
                                <input type="radio" id="sex1" class="magic-radio" name="sex" value="1" {if condition="!isset($info['sex']) || $info['sex']==1"
                                    }checked{/if} class="minimal">  <label for="sex1" class="checkbox-inline">男</label>
                                <input type="radio"  id="sex2" class="magic-radio" name="sex" value="2" {if condition="isset($info['sex']) && $info['sex']==2"
                                    }checked{/if} class="minimal"> <label for="sex2" class="checkbox-inline" style="margin-left: 15px;"> 女</label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">工号</label>
                                <div class="col-sm-3">
                                    <input class="form-control" name="job_number" value="{$info['job_number']|default=''}" placeholder="">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">账号</label>
                                <div class="col-sm-3">
                                    <input class="form-control" name="account" value="{$info['account']|default=''}" placeholder="">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">生日</label>
                                <div class="col-sm-3">
                                    <input class="form-control timepicker" name="birthday" value="{$info['birthday']|default=''}" placeholder="">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">部门</label>
                                <div class="col-sm-3 xyqk_input">
                                    <input style="border-radius: 6px;" class="form-control classname2" placeholder="请选择部门" name="department_name" value="{$info['department_name']|default=''}"/>
                                    <input type="hidden" name="department_id" value="{$info['department_id']|default=''}"/>
                                    <div class="delect_btn_an" style="right: 55px; top: 6px;"><i class="fa fa-remove"></i></div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">手机号码</label>
                                <div class="col-sm-3">
                                    <input class="form-control" name="mobile" value="{$info['mobile']|default=''}" placeholder="">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">邮箱</label>
                                <div class="col-sm-3">
                                    <input class="form-control" name="email" value="{$info['email']|default=''}" placeholder="">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">入职日期</label>
                                <div class="col-sm-3">
                                    <input class="form-control timepicker" name="entry_time" value="{$info['entry_time']|default=''}" placeholder="">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">参与排名</label>
                                <div class="col-sm-3" style="display: flex;">
                                <input type="radio" id="radio1" class="magic-radio" name="is_sort" value="0" {if
                                    condition="!isset($info['is_sort']) || $info['is_sort']==0" }checked{/if} class="minimal"> <label for="radio1" class="checkbox-inline"> 否</label>
                                <input type="radio" id="radio2" class="magic-radio" name="is_sort" value="1" {if
                                    condition="isset($info['is_sort']) && $info['is_sort']==1" }checked{/if} class="minimal"> <label for="radio2" class="checkbox-inline" style="margin-left: 15px;">是</label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">角色权限</label>
                                <div class="col-sm-3">
                                    <select name="role_id" class="select2 form-control">
                                        {foreach name="$role_list" item="vo"}
                                        <option value="{$vo['id']}" {if condition="isset($info['role_id']) && $info['role_id'] == $vo['id']"}selected{/if} >{$vo.name}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">奖扣权限</label>
                                <div class="col-sm-3">
                                    <select name="cpb_id" class="select2 form-control">
                                        <option value="0">无</option>
                                        {foreach name="$com_prize_buckle_list" item="vo"}
                                        <option value="{$vo['id']}" {if condition="isset($info['prize_buckle_id']) && $info['prize_buckle_id'] == $vo['id']"}selected{/if} >{$vo.name}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="box-footer">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-3">
                                <div class="btn-group pull-right">
                                    <button type="submit" style="padding: 8px 20px;" class="btn btn-info pull-right submits" data-loading-text="&lt;i class='fa fa-spinner fa-spin '&gt;&lt;/i&gt; 提交">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </form>
        </div>
    </div>
</section>
<!-- Modal -->
<script type="application/javascript">

    let department;

    $.ajax({
        url: "/company/task/base_department",
        data: {

        },
        async: true,
        success: function (data) {
                    department = data;

                     layui.use(['tree', 'laydate'], function () {
                var tree = layui.tree;
                var laydate = layui.laydate;

                //渲染
                var inst1 = tree.render({
                    elem: '#test14'  //绑定元素
                    , data: department,
                    accordion: true,
                    showLine: false,
                    click: function (obj) {
                        console.log(obj.data.title);
                        console.log(obj.data.id);
                        //  $("#myModal2").modal("hide");
                    }
                });
                //渲染
                var inst1 = tree.render({
                    elem: '#test13'  //绑定元素
                    , data: department,
                    accordion: true,
                    showLine: false,
                    click: function (obj) {
                        console.log(obj.data.title);
                        console.log(obj.data.id);
                        $("#myModal").modal("hide");
                    }
                });
            });

        }

        })

   

    let classname2 =   document.querySelector(".classname2");
    // classname2.onfocus = function(){
    //      $('#myModal').modal('show');
    // }


    // $('#myModal').modal('show');
    let classname = $(".classname");
    classname.map((i,item)=>{
                 item.onfocus = function () {
            switch (i) {
                case 0:
                  $('#myModalLabel2').text("角色权限选择");
                    break;
                case 1:
                      $('#myModalLabel2').text("奖扣权限选择");
                    break;
                default:
                    break;
            }
            $('#myModal2').modal('show');
          
        }
    })
 

    $(document).ready(function () {
        /*ajax页面加载icheck，有该控件的页面才需要*/
        $(".select2").select2({language:"zh-CN"});

        $('.timepicker').datetimepicker({
            format: "{$timepickerFormat | default='YYYY-MM-DD'}",   //YYYY-MM-DD HH:mm:ss
            locale: moment.locale('zh-cn')
        });
    })
</script>


<!-- Modal 弹出层重写 部门单选  -->
<link rel="stylesheet" href="__STATIC__/global/an_tree_css/an_tree_css.css">
<div class="modal fade" id="myModal_single" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width:543px;height: 635px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">部门选择</h4>
            </div>
            <div class="modal-body">
                <div class="modal-left">
                    <div class="modal-left-title" style="margin-bottom: 20px;">
                        <div class="input-group">
                            <input name="search_user_name" type="text" class="form-control" placeholder="">
                            <span class="input-group-btn">
                                <button class="btn btn-info search_btn" type="button"
                                    style="width: 47px; height: 34px; background-color: #1890FF;border: none;outline: none;">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="input-group table-body" style="width: 485px">
                        <div class="table-left" style="width: 100%;">
                            <div class="an_tree search_hide">

                            </div>
                            <div class="search_show" style="display: flex;  flex-direction: column;padding: 20px 10px;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<style>
.a{
    flex-direction: row;
}
</style>
</div>
<!-- 部门弹窗操作 部门单选   -->
<script>
    $("input[name='department_name']").focus(function () {
        $('#myModal_single').modal('show');
        // double_max = $("input[name='double_max']").val();
        // now_item_name = $(this);//节点
        // now_item_id = $("input[name='last_check_user_id']");//节点
        // first_id = $("input[name='first_check_user_id']").val();//id值
        // user_type = 2;
    });
</script>
<!-- 树结构js操作 部门单选  -->
<script>
    $("#myModal_single .an_tree").on("click", ".fa", function () {
        $(this).toggleClass("fa-caret-down");
        $(this).toggleClass("fa-caret-right");
        $(this).parents(".an_tree_set").eq(0).children(".an_tree_pack").toggle();
    });
    $("#myModal_single").on("click", ".an_tree_txt", function () {
        $('#myModal_single').modal('hide');
        $("input[name='department_name']").val($(this).html());
        $("input[name='department_id']").val($(this).attr("data_id"));
    });
    $("#myModal_single").on("click", ".search_btn", function () {
        var item = $("#myModal_single .an_tree_txt");
        var search_name = $("#myModal_single input[name='search_user_name']").val();
        $("#myModal_single .search_show").html("");
        if(search_name == ""){
            $("#myModal_single .search_hide").show();
            $("#myModal_single .search_show").removeClass("an_tree");
        }else{
            $("#myModal_single .search_hide").hide();
            $("#myModal_single .search_show").show();
            var content = "";
            for (let i = 0; i < item.length; i++) {
                var name = item.eq(i).html();
                if (name.indexOf(search_name) != -1) {
                    content += item.eq(i).prop("outerHTML");
                }
                console.log(name);
            }
            $("#myModal_single .search_show").append(content)
        }
        
    });
</script>
<!-- 递归填充目录 部门单选  -->
<script>
    var an_tree = ergodic({$department});
    $("#myModal_single .an_tree").append(an_tree);
    function ergodic(data) {
        var content = '';
        $.each(data, function (index, value) {
            if (value.children != "") {
                var children = ergodic(value.children);
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"><i class="fa fa-caret-right"></i></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack">' + children + '</div></div>';
            } else {
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack"></div></div>';
            }
        });
        return content;
    }
</script>
{/block}
